<template>
	<view class="zt-message">
		<view class="msg-con">
			<view class="zt-dot">
				<view class="zt-lins">
					<view class="dot-lins"></view>
				</view>
			</view>
		{{ msgText }}
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		props:["msgText"],
		methods:{
			
		}
	}
</script>

<style>
	.zt-message{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		box-shadow: 0 0 12px #ccc;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		z-index: 99999;
		background: rgba(0,0,0,0.2);
	}
	.msg-con{
		position: relative;
		background: #007AFF;
		text-align: center;
		line-height: 60px;
		font-family: "bodoni mt";
		border-radius: 12px;
		color: #FFFFFF;
		font-size: 0;
		animation: zt-message-loading 1s;
		width: 150px;
		height: 60px;
		font-size: 14px;
	}
	@keyframes zt-message-loading{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	.zt-dot{
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #10AEFF;
		position: absolute;
		top: -20px;
		right: -20px;
	}
	.zt-lins{
		width: 5px;
		height: 20px;
		position: absolute;
		top: 5px;
		left: 50%;
		border-radius: 1px;
		transform: translateX(-50%);
		background: #ff9966;
	}
	.dot-lins{
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #ff9966;
		position: absolute;
		bottom: -10px;
	}
</style>
